<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投保信息填写 - 学平险投保</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <style>
        /* 基础样式保护 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            color: #333333;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        
        .page-container {
            padding: 16px;
            padding-bottom: 70px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-label.required::after {
            content: '*';
            color: #f5222d;
            margin-left: 4px;
        }
        
        .form-input, .select {
            width: 100%;
            padding: 12px;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .form-input:focus, .select:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            text-decoration: none;
        }
        
        .btn-primary {
            background-color: #1890ff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #40a9ff;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .nav-bar .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        
        .nav-item.active {
            color: #1890ff;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 24px;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .checkbox-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #e8e8e8;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
        }
        
        .checkbox:checked {
            background-color: #1890ff;
            border-color: #1890ff;
        }
        
        .checkbox:checked::after {
            content: '✓';
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <style>
        /* 加粗文本样式 */
        .text-bold {
            font-weight: 600;
            color: #222;
        }

        /* 文档链接样式 */
        .doc-links {
            line-height: 1.8;
        }

        .doc-links a {
            color: var(--primary-color);
            text-decoration: none;
            margin: 0 2px;
            transition: all 0.3s;
        }

        .doc-links a:hover {
            text-decoration: underline;
            opacity: 0.8;
        }

        /* 文档弹窗样式 */
        .document-modal .modal-content {
            position: relative;
            padding: 20px 20px 80px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            width: 92%;
            max-width: 540px;
            background: #fff;
            border-radius: 16px;
        }

        .document-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 20px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 1.8;
            color: #333;
            scrollbar-width: thin;
            scrollbar-color: #1890ff #f0f0f0;
        }

        .document-content::-webkit-scrollbar {
            width: 4px;
        }

        .document-content::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 2px;
        }

        .document-content::-webkit-scrollbar-thumb {
            background-color: #1890ff;
            border-radius: 2px;
        }

        .document-content h3 {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 20px;
            padding: 0 0 12px;
            border-bottom: 1px solid #eee;
            color: #222;
        }

        /* 固定浮动的关闭按钮 */
        .document-modal .btn-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px 20px;
            background: white;
            border-top: 1px solid #eee;
            text-align: center;
            border-radius: 0 0 16px 16px;
            z-index: 10;
        }

        .btn-close {
            min-width: 120px;
            height: 36px;
            line-height: 36px;
            padding: 0 24px;
            font-size: 14px;
            border-radius: 18px;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
            transition: all 0.3s;
        }

        .btn-close:hover {
            background: #40a9ff;
            box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
        }

        /* 占位图样式 */
        .placeholder-content {
            text-align: center;
            padding: 40px 20px;
        }

        .placeholder-content img {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .placeholder-content p {
            color: #666;
            font-size: 16px;
        }

        /* 保费金额样式 */
        .price-amount {
            color: #f5222d;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 进入提示弹窗 -->
    <div class="modal" id="entryModal">
        <div class="modal-content">
            <h3 class="modal-title">进入提示</h3>
            <div class="text-sm text-gray-700">
                <p>尊敬的用户：根据保险监督管理机构要求特此提示，您已进入投保流程。<span class="text-bold">请您在投保前仔细阅读投保页面(包括页面内容及其页面下方的保险条款、投保须知、客户告知书及其他相关事项)全部内容</span>，并关注承保保险公司信息。您的操作将会被记录并留存。</p>
            </div>
            <div class="mt-6 text-center">
                <button class="btn btn-primary" onclick="closeModal('entryModal')">我已阅读，并继续</button>
            </div>
        </div>
    </div>

    <div class="page-container">
        <div class="card">
            <h2 class="text-xl font-bold mb-6">学生综合保障计划</h2>
            <div class="text-sm text-gray-500 mb-4">
                <p>世纪保险经纪股份有限公司吉林分公司</p>
                <p>销售范围：吉林省</p>
            </div>

            <form id="insuranceForm" onsubmit="return submitForm(event)">
                <!-- 投保信息 -->
                <div class="space-y-4">
                    <div class="form-group">
                        <label class="form-label required">起保日期</label>
                        <div class="flex items-center">
                            <input type="date" class="form-input" value="2025-09-01" readonly>
                            <span class="ml-2 text-gray-600">00:00:00</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">保障期间</label>
                        <select class="select">
                            <option value="1">一年</option>
                        </select>
                    </div>

                    <!-- 家长（投保人）信息 -->
                    <div class="form-group">
                        <label class="form-label required">家长（投保人）姓名</label>
                        <input type="text" class="form-input" placeholder="请输入姓名" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">家长身份证号</label>
                        <input type="text" class="form-input" placeholder="请输入18位身份证号" pattern="\d{17}[\dXx]" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">家长手机号</label>
                        <input type="tel" class="form-input" placeholder="请输入11位手机号" pattern="\d{11}" required>
                    </div>

                    <!-- 学生（被保险人）信息 -->
                    <div class="form-group">
                        <label class="form-label required">学生（被保险人）姓名</label>
                        <input type="text" class="form-input" placeholder="请输入姓名" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">学生身份证号</label>
                        <input type="text" class="form-input" placeholder="请输入18位身份证号" pattern="\d{17}[\dXx]" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">被保人与投保人的关系</label>
                        <select class="select" required>
                            <option value="">请选择</option>
                            <option value="parent_child">父母/子女</option>
                            <option value="self">投保人本人</option>
                            <option value="other">其他</option>
                        </select>
                    </div>

                    <!-- 学校信息 -->
                    <div class="form-group">
                        <label class="form-label required">学校所在市/州</label>
                        <input type="text" class="form-input" value="吉林省-延边州" readonly>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">学校所在地区</label>
                        <input type="text" class="form-input" value="延吉市民办园" readonly>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">学校名称</label>
                        <input type="text" class="form-input" value="测试1幼儿园" readonly>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">年级</label>
                        <select class="select" required>
                            <option value="">请选择</option>
                            <!-- 幼儿园 -->
                            <optgroup label="幼儿园">
                                <option value="kindergarten_pre">幼儿园小小班</option>
                                <option value="kindergarten_junior">幼儿园小班</option>
                                <option value="kindergarten_middle">幼儿园中班</option>
                                <option value="kindergarten_senior">幼儿园大班</option>
                            </optgroup>
                            <!-- 小学 -->
                            <optgroup label="小学">
                                <option value="primary_1">小学一年级</option>
                                <option value="primary_2">小学二年级</option>
                                <option value="primary_3">小学三年级</option>
                                <option value="primary_4">小学四年级</option>
                                <option value="primary_5">小学五年级</option>
                                <option value="primary_6">小学六年级</option>
                            </optgroup>
                            <!-- 初中 -->
                            <optgroup label="初中">
                                <option value="junior_1">初中一年级</option>
                                <option value="junior_2">初中二年级</option>
                                <option value="junior_3">初中三年级</option>
                            </optgroup>
                            <!-- 高中 -->
                            <optgroup label="高中">
                                <option value="senior_1">高中一年级</option>
                                <option value="senior_2">高中二年级</option>
                                <option value="senior_3">高中三年级</option>
                            </optgroup>
                            <!-- 职业学校/中专/大学 -->
                            <optgroup label="职业学校/中专/大学">
                                <option value="college_2020">2020级</option>
                                <option value="college_2021">2021级</option>
                                <option value="college_2022">2022级</option>
                                <option value="college_2023">2023级</option>
                                <option value="college_2024">2024级</option>
                            </optgroup>
                            <!-- 其他 -->
                            <option value="other">其他</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">班级</label>
                        <select class="select" required>
                            <option value="">请选择</option>
                            <script>
                                // 动态生成1-20班的选项
                                for (let i = 1; i <= 20; i++) {
                                    document.write(`<option value="${i}">${i}班</option>`);
                                }
                            </script>
                        </select>
                    </div>
                </div>

                <!-- 确认条款 -->
                <div class="mt-6">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" class="checkbox" required>
                        <span class="text-sm doc-links">本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
                            <a href="javascript:void(0)" onclick="showDocument('auth')">《授权委托书》</a>
                            <a href="javascript:void(0)" onclick="showDocument('notice')">《客户告知书》</a>
                            <a href="javascript:void(0)" onclick="showDocument('chinalifeTerms')">《中国人寿-保险条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('chinalifeExemption')">《中国人寿-免责条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('peoplelifeTerms')">《人民人寿-保险条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('peoplelifeExemption')">《人民人寿-免责条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('peopleHealthTerms')">《人民健康-保险条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('peopleHealthExemption')">《人民健康-免责条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('pacificTerms')">《太平洋财险-保险条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('pacificExemption')">《太平洋财险-免责条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('picicTerms')">《人保财险-保险条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('picicExemption')">《人保财险-免责条款》</a>
                            <a href="javascript:void(0)" onclick="showDocument('healthDeclaration')">《被保险人健康状态声明》</a>
                            <a href="javascript:void(0)" onclick="showDocument('insurancePlan')">《保险方案》</a>
                        </span>
                    </label>
                </div>

                <!-- 费用信息 -->
                <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">保费：</span>
                        <span class="text-xl font-bold price-amount">¥80</span>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary btn-block mt-6">确认投保</button>
            </form>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="nav-bar">
        <div class="grid grid-cols-4 gap-2">
            <a href="home.html" class="nav-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="consultation.html" class="nav-item">
                <i class="fas fa-comments"></i>
                <span>问题咨询</span>
            </a>
            <a href="claim-guide.html" class="nav-item">
                <i class="fas fa-file-alt"></i>
                <span>我要理赔</span>
            </a>
            <a href="my-orders.html" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的订单</span>
            </a>
        </div>
    </nav>

    <!-- 授权委托书弹窗 -->
    <div class="modal document-modal" id="authModal" style="display: none;">
        <div class="modal-content">
            <div class="document-content">
                <h3>授权委托书</h3>
                <p>本人/本机构已充分了解本保险产品，并授权世纪保险经纪股份有限公司作为本人/本机构的保险经纪人，委托其代为办理保险相关事宜。</p>
                
                <div class="section">
                    <div class="section-title">一、授权委托事项：</div>
                    <p>1、代为办理投保相关事宜，包括但不限于代为提交投保单证、代为解释投保单证、代为转递保险费、代为转递保单等；</p>
                    <p>2、代为办理保全相关事宜，包括但不限于代为申请保全项目、代为解释保全文件、代为转递保全文件等；</p>
                    <p>3、代为办理理赔相关事宜，包括但不限于代为申请理赔、代为解释理赔文件、代为转递理赔文件等；</p>
                    <p>4、代为办理咨询、投诉相关事宜，包括但不限于代为咨询、代为投诉、代为解释相关文件、代为转递相关文件等。</p>
                </div>

                <div class="section">
                    <div class="section-title">二、授权委托期限：</div>
                    <p>自本授权委托书签署之日起至保险合同终止之日止。</p>
                </div>

                <div class="section">
                    <div class="section-title">三、本人/本机构已知晓并同意：</div>
                    <p>1、本人/本机构已经仔细阅读并完全理解本授权委托书的全部内容；</p>
                    <p>2、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容行使相关权利；</p>
                    <p>3、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容代为办理相关事宜；</p>
                    <p>4、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容代为签署相关文件。</p>
                </div>

                <div class="signature-area">
                    <div class="signature-line">
                        <div>委托人（签字/盖章）：</div>
                        <div>_________________</div>
                    </div>
                    <div class="signature-line">
                        <div>日期：</div>
                        <div>_____年___月___日</div>
                    </div>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="btn-close" onclick="closeModal('authModal')">关闭</button>
            </div>
        </div>
    </div>

    <!-- 客户告知书弹窗 -->
    <div class="modal document-modal" id="noticeModal" style="display: none;">
        <div class="modal-content">
            <div class="document-content">
                <h3>客户告知书</h3>
                <p class="indent-none">尊敬的客户：</p>
                <p>感谢您委托我公司代为办理保险业务。本公司是基于投保人的利益，为投保人与保险公司订立保险合同提供中介服务的保险专业中介机构。为了保护您的合法权益，按照《保险经纪人监管规定》的要求，本公司应履行客户告知义务，现将有关事项告知如下，请您仔细阅读，并在回执处予以认可：</p>

                <div class="section">
                    <div class="section-title">一、公司基本情况</div>
                    <p class="indent-none">（一）公司名称：</p>
                    <p class="indent-none">（二）营业场所：</p>
                    <p class="indent-none">（三）机构编码：</p>
                    <p class="indent-none">（四）许可证有效期止：2026年6月9日</p>
                    <p class="indent-none">（五）业务范围：在全国区域内（港、澳、台除外）为投保人拟订投保方案、选择保险人、办理投保手续；协助被保险人或受益人进行索赔；再保险经纪业务；为委托人提供防灾、防损或风险评估、风险管理咨询服务；国家金融监督管理部门批准的其他业务。</p>
                    <p class="indent-none">（六）联系电话：</p>
                </div>

                <div class="section">
                    <div class="section-title">二、客户告知事项</div>
                    <p class="indent-none">1、本公司作为保险经纪人，仅负责代为办理保险业务，不承担保险责任。</p>
                    <p class="indent-none">2、本公司代为办理保险业务时，将严格遵守法律法规和监管部门的要求，保护您的个人信息和隐私。</p>
                    <p class="indent-none">3、您在投保前应仔细阅读保险条款，了解保险责任、责任免除、保险期间、保险金额、保险费、赔偿处理等重要内容。</p>
                    <p class="indent-none">4、您在投保时提供的所有信息必须真实、准确、完整，否则可能导致保险合同无效或影响您的权益。</p>
                    <p class="indent-none">5、您在投保后应及时缴纳保险费，逾期未缴纳可能导致保险合同失效。</p>
                    <p class="indent-none">6、您在保险期间内发生保险事故时，应及时通知本公司，并按照保险条款的要求提供相关证明和资料。</p>
                    <p class="indent-none">7、本公司代为办理理赔时，将严格按照保险条款和理赔流程进行，确保您的合法权益得到保障。</p>
                    <p class="indent-none">8、您在保险期间内享有保险合同约定的权利，包括但不限于保险金请求权、保险金给付权等。</p>
                    <p class="indent-none">9、您在保险期间内应遵守保险条款和相关法律法规，不得从事任何可能影响保险合同效力的行为。</p>
                    <p class="indent-none">10、您在保险期间内如需变更保险合同内容，应与本公司协商一致，并按照保险条款的规定办理。</p>
                </div>

                <div class="section">
                    <div class="section-title">三、客户告知回执</div>
                    <p class="indent-none">本人已仔细阅读上述客户告知书内容，并完全理解。本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意上述条款。</p>
                    <p class="indent-none">回执人（签字/盖章）：_________________</p>
                    <p class="indent-none">日期：_____年___月___日</p>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="btn-close" onclick="closeModal('noticeModal')">关闭</button>
            </div>
        </div>
    </div>

    <!-- 其他文档弹窗模板 -->
    <div class="modal document-modal" id="documentModal" style="display: none;">
        <div class="modal-content">
            <div class="document-content">
                <h3 id="documentTitle"></h3>
                <div class="placeholder-content">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f5f5f5'/%3E%3Ctext x='100' y='100' font-family='Arial' font-size='16' fill='%23999' text-anchor='middle' dominant-baseline='middle'%3E文档预览占位图%3C/text%3E%3C/svg%3E" alt="文档预览">
                    <p>文档内容加载中...</p>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="btn-close" onclick="closeModal('documentModal')">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 文档标题映射
        const documentTitles = {
            'chinalifeTerms': '中国人寿-保险条款',
            'chinalifeExemption': '中国人寿-免责条款',
            'peoplelifeTerms': '人民人寿-保险条款',
            'peoplelifeExemption': '人民人寿-免责条款',
            'peopleHealthTerms': '人民健康-保险条款',
            'peopleHealthExemption': '人民健康-免责条款',
            'pacificTerms': '太平洋财险-保险条款',
            'pacificExemption': '太平洋财险-免责条款',
            'picicTerms': '人保财险-保险条款',
            'picicExemption': '人保财险-免责条款',
            'healthDeclaration': '被保险人健康状态声明',
            'insurancePlan': '保险方案'
        };

        // 显示文档
        function showDocument(type) {
            // 关闭所有弹窗
            closeAllModals();
            
            if (type === 'auth') {
                showModal('authModal');
            } else if (type === 'notice') {
                showModal('noticeModal');
            } else {
                // 显示通用文档弹窗
                document.getElementById('documentTitle').textContent = documentTitles[type] || '文档预览';
                showModal('documentModal');
            }
        }

        // 关闭所有弹窗
        function closeAllModals() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }

        // 显示弹窗
        function showModal(id) {
            document.getElementById(id).style.display = 'flex';
        }

        // 关闭弹窗
        function closeModal(id) {
            document.getElementById(id).style.display = 'none';
        }

        // 提交表单
        function submitForm(event) {
            event.preventDefault();
            
            // 这里可以添加表单验证逻辑
            
            // 跳转到在线支付页
            window.location.href = 'payment.html';
            return false;
        }

        // 页面加载完成后显示进入提示弹窗
        window.onload = function() {
            showModal('entryModal');
        }
    </script>
</body>
</html> 